<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
  .grid-container {
    /* 网格布局 */
    display: inline-grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(3, 100px);
    margin: 100px;
  }
  .grid-item {
    padding: 10px;
    font-size: 30px;
    color: red;
  }
  .item1 {
    background-color: pink;
    /*
            1：第1根水平网格线
            2：第2根垂直网格线
            3：第3根水平网格线
            4：第4根垂直网格线
        */
    grid-area: 1/2/3/4;
  }
  .item2 {
    background-color: skyblue;
  }
  .item3 {
    background-color: khaki;
  }
</style>
<body>
  <!-- 
    TIP
    grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置。
    其值为四个值，分别对应上面四个属性，顺序为：
    grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
  -->
  <div class="grid-container">
    <div class="grid-item item1">1</div>
    <div class="grid-item item2">2</div>
    <div class="grid-item item3">3</div>
  </div>
</body>
</html>